<template>
  <div class="iconDoc">
    <div class="mask"></div>
    <div class="icondoc">

      <div class="icd-top">
        <p>洗涤图标建档</p>
        <i class="el-icon-close" @click="closeIconDoc"></i>
      </div>

      <div class="icd-info">
        <div>
          <p>代号</p>
          <el-input v-model="code" style="width: 80px;"></el-input>
        </div>
        <div>
          <p>图标编号</p>
          <el-input v-model="imageNo" style="width: 80px;"></el-input>
        </div>
        <div>
          <p>洗标说明</p>
          <el-input v-model="washInfo" style="width: 160px;margin-right:10px"></el-input>
        </div>
        <div class="dr">
          <!-- <el-upload
            action="http://47.106.236.180:9850/upload/washWaterMarkDoUpload"
            :show-file-list=false
            :on-exceed="handleExceed"
            :on-success="uploadSuccess">
            <el-button size="small" type="primary">上传图片</el-button>
          </el-upload> -->
          上传图片
          <input type="file" accept="image/*" @change="upLoad" id="file" class="outputlist_upload">
        </div>
        
        <img :src="imgSrc">
      </div>

      <el-table
        class="iconTable"
        :data="iconData"
        border
        style="width: 96%;margin:0 auto"
        height="300px"
        :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px'}"
        :cell-style="{padding:0,height:'36px'}"
        @row-click="rowClick">
        <el-table-column
          prop="code"
          label="代号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="imageNo"
          label="图标编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="washInfo"
          label="洗标说明">
        </el-table-column>
      </el-table>

      <div class="icd-op">
        <el-button icon="el-icon-delete" @click="deleteWash">删除</el-button>
        <el-button type="primary" icon="el-icon-folder-checked" @click="saveWash">保存</el-button>
      </div>
      
    </div>
  </div>
</template>

<script>
import { getWash, postWash, delWash } from '../../../../network/wash'
import { deleteImage, washWaterMarkDoUpload } from '../../../../network/images'

export default {
  data(){
    return {
      id: '',
      code: '',
      imageNo: '',
      washInfo: '',
      iconData: [],
      imgSrc: ''
    }
  },
  methods: {
    closeIconDoc(){
      this.$emit("closeIconDoc")
    },
    rowClick(e){
      this.id = e.id
      this.code = e.code
      this.imageNo = e.imageNo
      this.washInfo = e.washInfo
      this.imgSrc = e.imageUrl
    },
    deleteWash(){
      if (this.id == '') {
        this.$alert('请选中一条数据再进行删除操作', '提示', {
          confirmButtonText: '确定'
        })
      }else{
        delWash({id:this.id}).then(res => {
          if (res.data.code == 200) {
            this.delImg()
            this._getWash()
          }
        })
      }
    },
    saveWash(){
      for (const e of this.iconData) {
        if (this.code == e.code) {
          this.$alert('代号' + this.code + '已经存在', '提示', {
            confirmButtonText: '确定'
          })
          return
        } else if (this.imageNo == e.imageNo) {
          this.$alert('图像编号' + this.imageNo + '已经存在', '提示', {
            confirmButtonText: '确定'
          })
          return
        }
      }
      let params = {
        code: this.code,
        imageNo: this.imageNo,
        washInfo: this.washInfo,
        imageUrl: this.imgSrc
      }
      postWash(params).then(res => {
        if (res.data.code == 200) {
          this.imgSrc = ''
          this._getWash()
        }
      })
    },
    _getWash(){
      getWash().then(res => {
        this.iconData = res.data.data
        this.id = ''
        this.code = ''
        this.imageNo = ''
        this.washInfo = ''
      })
    },
    // 图片上传
    upLoad(e){
      if (this.imageNo == '') {
        this.$message.info("请填写图标编号")
        return
      }
      const file = document.getElementById('file')
      // console.log(file.files)
      if (!file.files[0]) return
      let formdata = new FormData()
      formdata.append('file', file.files[0])
      formdata.append('data', this.imageNo)
      washWaterMarkDoUpload(formdata).then(res => {
        if (res.data.code == 200) {
          this.imgSrc = res.data.data.path
        }
      })
    },
    delImg(){
      deleteImage({url:this.imgSrc})
      this.imgSrc = ''
    }
  },
  created(){
    this._getWash()
  }
}
</script>

<style scoped>
  .dr {
    padding: 0 10px;
  }
  .mask{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.3;
    z-index: 9;
  }
  .icondoc {
    position: fixed;
    top: 25%;
    left: 50%;
    width: 730px;
    height: 500px;
    transform: translateX(-50%);
    background-color: #fff;
    box-sizing: border-box;
    z-index: 99;
  }
  .icd-top{
    background-color: #f2f2f2;
    height: 50px;
    margin-bottom: 15px;
  }
  .icd-top p {
    float: left;
    margin: 15px 0 0 20px;
    font-weight: bolder;
  }
  .icd-top i {
    width: 50px;
    float: right;
    text-align: center;
    line-height: 50px;
  }
  
  .icd-info{
    height: 60px;
    display: flex;
  }
  .icd-info p{
    display: inline;
    margin-left: 10px;
  }
  .icd-info img{
    width: 50px;
    height: 50px;
    margin-left: 20px;
  }

  .iconTable{
    margin: 0 auto;
  }

  .icd-op{
    position: absolute;
    /* width: 200px; */
    bottom: 20px;
    right: 10px;
  }
</style>

<style>
  .icd-info .el-input{
    margin-left: 15px;
  }
  .icd-info .el-input__inner{
    height: 30px;
  }
</style>